<template>
    <div class="panel panel-default panel-search">
        <el-container>
            <el-aside width="22%" v-show="showSort">
                <v-sort-table ref="sortTable" :page="page" :header="header" :doSortFun="doSortFun">
                </v-sort-table>
            </el-aside>
            <el-main>

                <el-form :inline="true" label-width="85px" label-position="left">

                    <el-form-item label="字段类型" prop="colType">
                        <dict-data-select @change="search" v-model="page.query.param.colType"
                                          :clearable="true"></dict-data-select>
                    </el-form-item>
                    <el-form-item label="中文名称" prop="colComment">
                        <el-input placeholder="中文名称" v-model="page.query.param.colComment"></el-input>
                    </el-form-item>
                    <el-form-item label="英文名称" prop="colName">
                        <el-input placeholder="英文名称" v-model="page.query.param.colName"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" v-keycode="'ENTER'">查询</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                    <el-button @click="delAll" v-if="table.tableId" class="btn_right" plain>
                        <span style="color:red">删除所有</span>
                    </el-button>

                    <el-button v-if="table.tableId" class="btn_right" type="primary" plain @click="create">新增
                    </el-button>
                    <el-button v-if="table.tableId" @click="dbImportTableFields" type="info" class="btn_right" plain>
                        根据DB刷新
                    </el-button>
                    <el-button type="priamry" plain @click="makeWebPage" v-if="table.metadataId" class="btn_right"
                               plain>
                        生成页面
                    </el-button>
                    <el-button @click="btnSort" v-if="table.tableId" class="btn_left" plain> 排序</el-button>

                </el-form>


                <v-table ref='table' :page='page' :table-minheight='450' @dataloaded='onDataloaded'>
                    <el-table-column prop="seq" label="序号" width="50">
                        <template slot-scope="scope"><span>{{ scope.$index + 1 }} </span></template>
                    </el-table-column>
                    <el-table-column prop='fieldOrder' label='排序' width='80'>
                        <template slot-scope='{row}'>
                            {{ row.fieldOrder || row.colId }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='tableId' label='元数据标识' width='120'>
                        <template slot-scope='{row}'><span style='color:mediumvioletred'>
			                    {{ row.tableId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop='colComment' label='中文名称' width='145'>

                        <template slot-scope="scope">
                            <a class="link-name" href="javascript:;" @click="edit(scope.row)">
                                {{ scope.row.colComment || scope.row.colName }}
                            </a>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop='colName' label='英文名称' width='150'>
                        <template slot-scope='{row}'><span style='color:mediumvioletred'>
			                {{ row.colName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop='colType' label='类型' width='90'>
                        <template slot-scope='{row}'>
                            {{ row.colType }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='maxLength' label='长度' width='55'>
                        <template slot-scope='{row}'>
                            {{ row.maxLength }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldDecimal' label='小数位' width='75'>
                        <template slot-scope='{row}'>
                            {{ row.fieldDecimal }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldIsNull' label='是否为空' width='80'>
                        <template slot-scope='{row}'>
                    <span :style='row.fieldIsNull?"color:red":"color:black"'>
                        {{ row.fieldIsNull ? '是' : '否' }}
                    </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldDefault' label='默认值' width='60'>
                        <template slot-scope='{row}'>
                            {{ row.fieldDefault }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldReadonly' label='只读' width='80'>
                        <template slot-scope='{row}'>
                            <span :style='row.fieldReadonly?"color:red":"color:black"'>
                                {{ row.fieldReadonly ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column :sortable="true" prop='fieldPk' label='主键' width='70'>
                        <template slot-scope='{row}'>
                            <span :style='row.fieldPk?"color:red":"color:black"'>
                                {{ row.fieldPk ? '是' : '否' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldAuto' label='自动' width='56'>
                        <template slot-scope='{row}'>
                        <span :style='row.fieldAuto?"color:red":"color:black"'>
                            {{ row.fieldAuto ? '是' : '否' }}
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop='displayFormat' label='显示信息' align="center">
                        <el-table-column prop='fieldVisible' label='是否显示' width='75'>
                            <template slot-scope='{row}'>
                                <span :style='row.fieldVisible?"color:red":"color:black"'>
                                    {{ row.visibleFlag ? '是' : '否' }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop='displayColor' label='颜色' width='110'>
                            <template slot-scope='{row}'><span style='color:blue'>
		                    	{{ row.displayColor }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop='fieldDisplaysize' label='显示长度' width='70'>
                            <template slot-scope='{row}'>
                                {{ row.fieldDisplaysize }}
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop='createTime' label='创建时间' width='140'>
                        </el-table-column> -->
                        <el-table-column prop='fieldFormat' label='格式' width='80'>
                            <template slot-scope='{row}'>
                                {{ DICT.FIELDFORMAT[row.fieldFormat] }}
                            </template>
                        </el-table-column>
                        <el-table-column prop='fieldComponent' label='控件' width='80'>
                            <template slot-scope='{row}'>
                                {{ DICT.FIELDCOMPONENT[row.fieldComponent] }}
                            </template>
                        </el-table-column>
                        <el-table-column prop='refPool' label='弹出框' width='100'>
                            <template slot-scope='{row}'>
                                {{ DICT.REFPOOL[row.refPool] }}
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column prop='fieldIscal' label='计算字段' width='90'>
                        <template slot-scope='{row}'>
                        <span :style='row.fieldIscal?"color:red":"color:black"'>
                            {{ row.fieldIscal ? '是' : '否' }}
                        </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldMin' label='最小值' width='60'>
                        <template slot-scope='{row}'>
                            {{ row.fieldMin }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='fieldMax' label='最大值' width='64'>
                        <template slot-scope='{row}'>
                            {{ row.fieldMax }}
                        </template>
                    </el-table-column>
                    <el-table-column prop='displayFormat' label='关联' align="center">
                        <el-table-column :sortable="true" prop='fieldSrc' label='关联类型' width='120'>
                            <template slot-scope='{row}'>
                                {{ DICT.FIELDSRC[row.fieldSrc] }}
                            </template>
                        </el-table-column>
                        <el-table-column :sortable="true" prop='refObject' label='关联数据' width='240'>
                            <template slot-scope='{row}'>
                                {{ row.refObject }}
                            </template>
                        </el-table-column>
                        <el-table-column prop='refParameter' label='关联参数' width='120'>
                            <template slot-scope='{row}'>
                                {{ row.refParameter }}
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column prop='fieldRemark' label='说明' width='64'>
                        <template slot-scope='{row}'>
                            {{ row.fieldRemark }}
                        </template>
                    </el-table-column>


                    <el-table-column width='80' label='操作' :fixed='"right"'>
                        <template slot-scope='scope'>
                            <el-button type='text' title='编辑' @click='edit(scope.row)'>
                                <i class='el-icon-edit'></i>
                            </el-button>
                            <el-button type='text' @click='del(scope.row,scope.$index)' title='删除'>
                                <span style='color: red'> <i class='el-icon-delete red'></i></span>
                            </el-button>
                        </template>
                    </el-table-column>
                </v-table>
            </el-main>

        </el-container>
        <v-dialog ref="formDiag" title="信息编辑" :width="'760px'">
            <field-panel @saved="onFormSaved"></field-panel>
            <div slot="footer">
                <el-button type="primary" @click="$refs.formDiag.dispatch('submit')">保存</el-button>
                <el-button type="default" @click="()=>{$refs.formDiag.hide()}">取消</el-button>
            </div>
        </v-dialog>

    </div>
</template>

<style lang="less" scoped>
.btn_left {
    float: left;
    margin-right: 5px;
    margin-right: 5px;
}

.btn_right {

    float: right;
    margin-right: 20px;
}
</style>

<script>

import DictDataSelect from '@/components/widgets/platform/DictDataSelect.vue';
import SubsysSelect from '@/components/widgets/metadata/SysAppSelect.vue';
import FieldPanel from './FieldForm';

export default {
    components: {FieldPanel, DictDataSelect, SubsysSelect},
    props: {
        value: {
            type: Object,
            required: true
        },
        enableView: {
            type: Boolean,
            deafault: false
        }
    },
    watch: {
        table: {
            handler: function (newVal, oldVal) {
                if (this.enableView) {
                    console.log('FieldMng rev from tableMng: ' + this.table.metadataAlias)
                    this.search();
                }
            },
            deep: true // immediate:true
        },

        enableView: {
            handler: function (newVal, oldVal) {
                if (this.enableView) {
                    console.log('FieldMng rev from tableMng: ' + this.table.metadataAlias)
                    this.search();
                }
            },
            deep: true // immediate:true ,
        }

    },
    computed: {
        table: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            }
        }
    },
    data() {
        return {
            // elTableId: 'elTableIdField',
            doSortMetadataField: null, // this.$api.metadata.MetadataTableService.doSortMetadataField,

            showSort: false,
            header: [
                {
                    label: 'ID',
                    prop: 'colId'
                },
                {
                    label: '排序',
                    prop: 'fieldOrder'
                },
                {
                    label: '中文名称',
                    prop: 'colComment'
                },
                {
                    label: '英文名称',
                    prop: 'colName'
                }

            ],

            DICT: {
                'FIELDFORMAT': {
                    '0': '默认',
                    '1': '金额',
                    '2': '百分比%',
                    '3': '序号'
                },
                'FIELDCOMPONENT': {
                    '0': '默认',
                    '1': '按扭',
                    '2': '下拉框',
                    '3': '多选框',
                    '4': '单选框'
                },
                'REFPOOL': {
                    '0': '默认',
                    '1': '选任务面板',
                    '2': '选人员面板',
                    '100': '测试标签函数'
                },
                'FIELDSRC': {
                    '0': '无',
                    '100': '数据POOL',
                    '200': '数据字典',
                    '300': '关联显示'
                }
            },
            page: {
                query: {
                    orderBys: 'fieldOrder|asc',
                    param: {
                        tableId: 0,
                        isDeleted: false
                    }
                },
                getData: this.$api.metadata.MetadataColumnProp.query
            }
        }
    },
    methods: {
        btnSort() {
            this.showSort = !this.showSort
            if (this.showSort) {
                this.$refs.table.calQueryStartLimt(this.page.query)
                this.$refs.sortTable.show()
            }
        },

        // sortedData.forEach((item, index, array) => {
        //     ids.push(item[this.header[0].prop])
        // })
        doSortFun(sortedData) {

            let ids = sortedData.map(x => x[this.header[0].prop]).join() // debugger
            let params = {
                ids: ids
            }
            this.doSortMetadataField(params).then(
                rsp => {
                    this.$msgJsonResult(rsp)
                    this.search()
                })

        },
        onFormSaved() {
            this.$refs.formDiag.hide();
            this.$nextTick(this.search);
        },
        init(options = {}) {
            // this.search();
        },
        search() {
            this.getSearchParams();
            this.$refs.table.load();
        },
        cancel() {
            this.dateRangeType = null;
            this.dateRange = [];
            this.page.query = {
                orderBys: 'fieldOrder|asc',
                param: {
                    tableId: this.table.tableId
                }
            };

            this.search();
        },
        onDataloaded(rsp) {

        },
        getSearchParams() {
            this.page.query.dateRanges = {};
            if (this.dateRangeType != null && this.dateRange && this.dateRange.length > 0) {
                this.page.query.dateRanges[this.dateRangeType] = {
                    startDate: this.dateRange[0],
                    endDate: this.dateRange.length > 1 ? this.dateRange[1] : null
                };
            }
            this.page.query.param.tableId = this.table.tableId
            return this.page.query;
        },

        create() {
            this.$refs.formDiag.show({table: this.table});
        },

        edit(row) {
            this.$refs.formDiag.show({colId: row.colId});
        },

        view(row) {
            this.$refs.formDiagView.show({colId: row.colId});
        },

        toggleStatus(row) {
        },

        dbImportTableFields() {

            let f = () => this.$api.platform.metadata.MetadataTableService.dbImportTableFields(this.table.metadataId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code === 200) {
                    this.search();

                }
            })

            this.$myconfirm('确定要从DB导入表字段吗?', f)
        },
        makeWebPage(row) {
            let params = {
                param: {
                    metadataId: row.metadataId ? row.metadataId : this.table.metadataId
                }
            }
            this.$api.platform.metadata.MetadataTableService.makeWebPage(params).then(rsp => {
                this.$msgJsonResult(rsp);

            });
        },
        delAll(row) {

            let f = () => this.$api.platform.metadata.MetadataFieldService.deleteAllByMetadataId(this.table.metadataId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code == 0) {
                    this.search();

                }
            })
            this.$myconfirm('确定删除\'' + this.table.metadataAlias + '\'所有字段记录吗?', f)
        },

        del(row) {
            let f = () => this.$api.metadata.MetadataColumnProp.deleteById(row.colId).then(rsp => {
                this.$msgJsonResult(rsp);
                if (rsp.code === 200) {
                    this.search();

                }
            })
            this.$myconfirm('确定删除\'' + row.fieldName + '\'此条记录吗?', f)

        }

    },
    created() {
    },
    mounted() {
        this.$on('init', this.init);
    }
}
</script>
